<template>
  <div>
    <el-alert
      v-if="!source || source.length === 0"
      :title="'未找到' + hours.toString() + '小时内记录的数据'"
      type="info"
      :closable="false"
    >
    </el-alert>
    <el-table v-else :data="source" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="人员科室">
              <span>{{ props.row.clientOffice }}</span>
            </el-form-item>
            <el-form-item label="人员班组">
              <span>{{ props.row.clientGroup }}</span>
            </el-form-item>
            <el-form-item label="开始时间">
              <span>{{ props.row.begin }}</span>
            </el-form-item>
            <el-form-item label="结束时间">
              <span>{{ props.row.time }}</span>
            </el-form-item>
            <el-form-item label="检查时长">
              <span
                ><b>{{ props.row.duration }}</b
                >&nbsp;分钟</span
              >
            </el-form-item>
            <el-form-item label="检查项目">
              <el-tag
                v-for="(item, i) in JSON.parse(props.row.remark)"
                :key="i"
                size="small"
                style="margin-right: 1em"
                >{{ item }}</el-tag
              >
              <span v-if="JSON.parse(props.row.remark).length === 0"
                >无项目</span
              >
            </el-form-item>
            <el-form-item label="备注说明">
              <span v-if="props.row.comment.length > 0">{{
                props.row.comment
              }}</span>
              <span v-else>无说明</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="clientName" label="姓名" width="90px">
      </el-table-column>
      <el-table-column label="时间" width="80px">
        <template slot-scope="scope">
          <i class="el-icon-date"></i>
          <span>
            {{
              new Date(scope.row.begin).getMonth() +
                1 +
                "/" +
                new Date(scope.row.begin).getDay()
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="分类"> </el-table-column>
      <el-table-column label="评分" width="170px">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="sector" label="扇区" width="60px">
      </el-table-column>
      <el-table-column prop="seat" label="席位" width="90px"> </el-table-column>
      <el-table-column prop="userName" label="记录人" width="90px">
        <template slot-scope="scope">
          <span v-if="scope.row.userName == userName">您</span>
          <span v-else>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    source: { type: Array, required: true },
    hours: { type: Number, required: false, default: 48 },
  },
  computed: {
    userName() {
      return this.$store.getters.userbase.name;
    },
  },
};
</script>
